<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鸡兔同笼问题</title>
    <style>
        .container {
            width: 60%;
            margin: 0 auto;
            background-color: aqua;
            min-height: 220px;
        }

        h2 {
            text-align: center;
            padding-top: 10px;
        }

        p {
            width: 90%;
            margin: 0 auto;
            text-align: center;
        }

        input {
            box-sizing: border-box;
            width: 60px;
        }

        #result {
            margin: 20px auto;
            height: 40px;
            width: 75%;
            padding: 20px;
            border: 1px dotted goldenrod;
            background-color: rgb(221, 220, 220);
            font-weight: bold;
        }

        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        button {
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>循环解决鸡兔同笼问题</h2>
        鸡兔一共 <input id="totalAnimals" value="35"> 只。笼子里脚一共 <input type="number" id="totalLegs" value="94"> 只，请问分别有多少只鸡和兔？<button onclick="calculate()">计算</button>
        <p id="result"></p>
    </div>

    <script>
        function calculate() {
            const totalAnimals = parseInt(document.getElementById('totalAnimals').value, 10);
            const totalLegs = parseInt(document.getElementById('totalLegs').value, 10);
            let chickens = 0, rabbits = 0;

            for (let i = 0; i <= totalAnimals; i++) {
                rabbits = totalAnimals - i;
                if (2 * i + 4 * rabbits === totalLegs) {
                    chickens = i;
                    break;
                }
            }

            if (chickens === 0 && rabbits === 0) {
                document.getElementById('result').textContent = '无解';
            } else {
                document.getElementById('result').textContent = `分别有鸡${chickens}只，有兔子${rabbits}只`;
            }
        }
    </script>
</body>
</html>